<!--
 * @Author: your name
 * @Date: 2020-08-20 15:10:47
 * @LastEditTime: 2020-09-25 17:27:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \devopsh:\project\QMangolia-web\src\views\build\pipeline\modal.vue
-->
<template>
  <el-dialog
    :title="title"
    custom-class="create-repo-dialog"
    :visible.sync="dialogVisible"
    :width="width"
    :fullscreen="fullscreen"
    :before-close="handleClose"
  >
    <el-form ref="form" :rules="rules" :model="form" label-position="left" label-width="120px">
      <el-form-item label="代码仓库名称" prop="name">
        <el-input v-model="form.name" @input="form.path = form.name" />
      </el-form-item>
      <el-form-item label="代码仓库路径" prop="path">
        <el-input v-model="form.path" placeholder="请输入项目标识串">
          <template slot="prepend">{{ gitUrl }}</template>
        </el-input>
      </el-form-item>
      <el-form-item label="公开性" prop="visibility">
      <el-select v-model="form.visibility" placeholder="请选择">
        <el-option
          v-for="item in visibilityOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      </el-form-item>
      <el-form-item label="项目描述(可选)" prop="description">
        <el-input
          v-model="form.description"
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="创建README" prop="initializeWithReadme">
        <el-checkbox v-model="form.initializeWithReadme" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { createRepo } from '@/utils/apiPath'
export default {
  props: {
    title: {
      type: String,
      default: '创建项目'
    },
    width: {
      type: String,
      default: '840px'
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    gitUrl: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        name: '',
        path: '',
        description: '',
        visibility: 'private',
        initializeWithReadme: true,
      },
      rules: {
        name: [{ required: true, message: '代码仓库名称必填', trigger: 'blur' }],
        path: [{ required: true, message: '项目标识串', trigger: 'blur' }],
        visibility: [{ required: true, message: '公开性必选', trigger: 'blur' }]
      },
      visibilityOptions: [{
        value: 'private',
        label: '私有'
      }, {
        value: 'internal',
        label: '内部'
      }, {
        value: 'public',
        label: '公开'
      }]
    }
  },
  methods: {
    visibleChange(value = true) {
      this.dialogVisible = value
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    cancel() {
      this.dialogVisible = false
    },
    save: _.throttle(function() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          createRepo(this.form).then((res) => {
            if (res.code === 200) {
              this.dialogVisible = false
              this.$message.success('创建成功')
              this.$emit('update-list')
            } else {
              // todo
            }
          })
        }
      })
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-dialog.create-repo-dialog {
  .el-dialog__body {
    padding: 30px 60px;
  }
  .el-dialog__footer {
    border-top: 1px solid #E1E1E1;
    text-align: center;
    padding: 20px;
    .el-button + .el-button {
      margin-left: 60px;
    }
  }
}
</style>
